<template>
  <div>
    <Menu mode="horizontal"  :active-name="filter" @on-select="onSelect">
      <MenuItem :name="item.filter" v-for="item in orderTypeList" :key="item.filter"> {{$t(item.name)}}</MenuItem>
    </Menu>
    <div>
      <Spin v-if="showLoading">
        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>Loading</div>
      </Spin>
      <OrderItem
        v-for="(item, i) in getOrderList"
        :key="`orderItem-${i}`"
        :item="item"
        @confirmReceipt="confirmReceipt"
        @cancelOrder="cancelOrder"
      ></OrderItem>
      <Empty v-if="!getOrderList.length" type="Cart"></Empty>
      <!-- <Page :total="orderData.length" :show-total="true"/> -->
      <Page :total="orderData.length"/>
    </div>
  </div>
</template>

<script>
import store from "@/vuex/store";
import { mapState, mapActions } from "vuex";
import OrderItem from "./OrderItem.vue";
import Empty from "../../../components/empty/index.vue";
export default {
  name: "MyOrder",
  data() {
    return {
      comName: "",
      filter:'6',
      orderData:{},
      showLoading:false
    };
  },
  components: {
    OrderItem,
    Empty
},
  computed: {
    getOrderList() {
      const {filter,orderData} = this
      console.log('getOrderList',orderData)
      return  orderData[filter] && orderData[this.filter]['data'] || []
    }
  },
  created() {
    const { subType } = this.$route.query || {}
    if(subType){
      this.filter = subType
    }
    this.page = 1
    this.getMyOrder()
    this.orderTypeList = [
      {
        name: "全部订单",
        type: "allOrder",
        filter: "6",
      },
      {
        name: "待付款",
        type: "obligation",
        filter: "1",
      },
      {
        name: "待发货",
        type: "waitDeliver",
        filter: "2",
      },
      {
        name: "待收货",
        type: "waitReceiving",
        filter: "3",
      },
      {
        name: "待评价",
        type: "evaluated",
        filter: "4",
      },
    ];
  },
  methods: {
    async getMyOrder(){
      this.showLoading = true
      const { filter,page} = this
      const {status,data} = await this.$http.getMyOrder({filter,page})
      if(status===200){
          this.$set(this.orderData,filter,{
            filter,
            page,
            data
          })
          this.showLoading=false
      }
    },
    onSelect(name){
      console.log({name});
      this.filter = name
      this.getMyOrder()
    },
    cancelOrder(order_num){
      this.$Modal.confirm({
        title: '订单提示',
        content: '确认取消订单吗？',
        onOk: () => {
          this.$http.getMyOrderquxiao({order_num}).then(res=>{
            const {status,data} = res
            if(status===200){
                this.getMyOrder()
            }
          })
        },
      });
    },

    confirmReceipt(order_num){
      this.$Modal.confirm({
        title: '温馨提示',
        content: '确认收货吗？',
        onOk: () => {
          this.$http.getqrshouhuo({order_num}).then(res=>{
            const {status,data} = res
            if(status===200){
              this.getMyOrder()
            }
          })
        },
      });
    },
  }
};
</script>


<style lang="scss" scoped>
.my-wrap {
  width: 1190px;
  margin: 0 auto;
}
.avatar-wrap {
  background-color: #fff;
  padding: 20px;
  width: 180px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 10px 0;
  .username {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
  }
}

.demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
        margin:50px auto;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
/deep/ .ivu-menu-item-group-title {
  display: none;
}
/deep/ .ivu-page {
  margin: 30px auto;
  text-align: center;
}
</style>
